
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=800;

       /* context.lineWidth=10;
        context.beginPath();
        context.lineWidth=5;
       context.lineTo(100,200);
       context.lineTo(300,400);
       context.lineTo(100,600);
        context.strokeStyle="red";
        context.stroke();

        context.beginPath();
        context.lineTo(300,200);
        context.lineTo(500,400);
        context.lineTo(300,600);
        context.strokeStyle="green";
        context.stroke();

        context.beginPath();
        context.lineTo(500,200);
        context.lineTo(700,400);
        context.lineTo(500,600);
        context.strokeStyle="blue";
        context.stroke();*/

    /*    context.beginPath();
        context.moveTo(100,350);
        context.lineTo(500,350);
        context.lineTo(500,200);
        context.lineTo(700,400);
        context.lineTo(500,600);
        context.lineTo(500,450);
        context.lineTo(100,450);
//        context.lineTo(100,350);
        context.closePath();

        context.lineWidth=15;
        context.fillStyle="yellow";
        context.strokeStyle="#058";

        context.fill();
        context.stroke();*/
        drawRect(context,100,100,400,400,10,"#058","red");
        drawRect2(context,300,300,400,400,10,"#058","rgba(0,256,0,0.5 )");
        function  drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillcolor){
            cxt.beginPath();
           /* cxt.moveTo(x,x);
            context.lineTo(x+width,x);
            context.lineTo(x+width,x+height);
            context.lineTo(x,x+height);*/

            cxt.rect(100,100,400,400);
            context.closePath();
            context.lineWidth=borderWidth;
            context.fillStyle=fillcolor;
            context.strokeStyle=borderColor;

            context.fill();
            context.stroke();
        }
        function  drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillcolor){
            context.lineWidth=borderWidth;
            context.fillStyle=fillcolor;
            context.strokeStyle=borderColor;
            context.fillRect(x,y,width,height);
            context.strokeRect(x,y,width,height);
        }
    }
</script>
</body>
</html>